<!DOCTYPE html>
<html>
	
<head>
	<title>DADA Books</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<link href="lib/kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
	<link href="lib/kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
	
	<link rel="stylesheet" href="/css/main.css" type="text/css" />
	
	<script>var env="pro";</script>
	
	<script src="lib/kendo/js/jquery.min.js"></script>
	
	<script src="lib/kendo/js/kendo.web.min.js"></script>
	<script src="lib/fabric/fabric.0.9.15.min.js"></script>
	<script src="fonts/Delicious_500.font.js"></script>
	
	<script src="lib/BlobBuilder.min.js"></script>
	<script src="lib/FileSaver.min.js"></script>
	<script src="lib/jquery.plist.js"></script>
	
	<script src="js/controllers/mainPanelController.js"></script>
	<script src="js/controllers/leftTreeController.js"></script>
	<script src="js/controllers/slidderController.js"></script>
	<script src="js/controllers/mainCanvasController.js"></script>
	<script src="js/controllers/imageSourceController.js"></script>
	<script src="js/controllers/sceneListController.js"></script>
	<script src="js/controllers/actionController.js"></script>
	<script src="js/controllers/textController.js"></script>
	<script src="js/controllers/stateController.js"></script>
	<script src="js/controllers/timeline.js"></script>
	<script src="js/controllers/deviceController.js"></script>
	<script src="js/controllers/previewController.js"></script>
	<script src="js/controllers/settingsController.js"></script>
	<script src="js/controllers/batchNodeController.js"></script>
	
	<script src="js/book.js"></script>
	<script src="js/saveBook.js"></script>
	<script src="js/json2plist.js"></script>
	<script src="js/openBook.js"></script>
	
	<script src="js/main.js"></script>
	<script src="js/init.js"></script>
	
	
	
	
	
	
	
	
	
	<script>
	if (env=="dev"){

		/*
		$.ajax({
			  url: "/getFile?fileName=load.plist"
			, dataType: "xml"
			, success: function(data){
				console.log('Data: ', data);
				var book = $.plist(data);
				console.log('Book loaded: ', book);
				openBook(book)
			}
		})
		*/
		
	}
	
	</script>
</head>
	
	
<body>

	<div id="device-window-overlay"></div>
	 
	<header>

		<ul id="menu">
			<li title="Timeline" id="timeline-btn">
				<img id="show-timeline" class="timeline-icon" src="/img/timeline.png" width="23" height="23" />
			</li>
			<li title="Batch Nodes" id="batch-nodes-btn">
				<img id="batch-nodes-img" src="/img/batchnode.png" width="23" height="23" />
			</li>
			<li title="Previsualización" id="play-btn">
				<img id="open-preview" class="header-icon" src="/img/play_timeline.png" width="26" height="26" />
			</li>
			<li title="Configuración del libro" id="info-btn">
				<img id="info-img" class="header-icon" src="/img/info.png" width="24" height="24" />
			</li>
			<li>
				<img src="/img/settings-wheel.png" width="24" height="24" />
				<ul>
					<li id="newBookBtn">Nuevo libro</li>
					<li id="openBookBtn">Abrir libro</li>
					<li id="exportBtn">Guardar libro</li>
				</ul>
			</li>
		</ul>

		<input type="text" value="Mi primer libro" id="book-name-input" class="title" />
		
	</header>
	
	<div id="main">
	
		<div id="mainWrapper">
			
			<div id="splitterWrapper">
			    	    	
			    	<div id="leftPanel">
			    	
			    		<div id="leftPanelWrapper">
			    			<span class="title">Objetos de la escena</span>		    			
			    			<div id="treeview-left"></div>		
			    			<table id="images-panel-buttons">
			    				<tr>
				    				<td><a title="Nueva imagen" id="uploadImagesLocalButton"><img src="/img/upload.png" /></a></td>
				    				<td><a title="Añadir imagen" id="addImageLocalButton"><img src="/img/image_add.png" /></a></td>
				    				<td class="ico-text"><a title="Añadir texto" id="addTextButton"><img src="/img/insert-text.png" /></a></td>
				    				<td><a title="Eliminar objeto seleccionado" id="removeImageLocalButton"><img src="/img/image_remove.png" /></a></td>
			    				</tr>
			    			</table>	    			
			    		</div>

			    		<div id="imagesPanel">
			    			<div id="listView">
			    			</div>
							<div id="pager" class="k-pager-wrap">
							</div>
						</div>
					</div>
					<!-- end leftPanel -->    
					
					
			    
			    
			    	<div id="middlePanel">

			 			<div class="mainCanvasWrapper">
			 			
			 				<input type="text" value="" id="scene-name-input" class="title" />
			    			<div id="canvasWrapper">

							<!-- <canvas id="canvas" width="500" height="400"></canvas> -->
			    			
			    			</div>
			    		</div>
			    		<div id="sceneListWrapper">
			    			<div id="sceneButtonContainer">
			    				<button id="snapshotButton" class="button">Captura de pantalla</button>
			    				<button id="removeSceneButton" class="button">Eliminar escena</button>
			    				<button id="newSceneButton" class="button">Nueva escena</button>
			    			</div>
			    			
			    			<ul id="sceneList">	
			    			</ul>			    		
			    		</div>
					</div>	   
					<!-- end middlePanel --> 
					
						
			    
			    	<div id="rightPanel">
			    	
			    		<span class="title">Propiedades del objeto</span>	
								
                        <ul id="properties-list">
                        	
                        	<li class="prop-title">Nombre:</li>
                        	<li><input id="inputName" type="text" value="" class="k-textbox" style="width:180px" /></li>
                        	
                        	<li class="prop-title">Grupo:</li>
     						<li><input id="group-input" type="text" class="k-textbox" style="width:180px" /></li>
     						
     						<li class="prop-title">Batch node:</li>
     						<li><select id="batch-node-input" style="width:180px"></select></li>
                        	
                        	<li class="prop-title">
                       			<label>Estado inicial:</label>
                       			<div id="state-select-layer">
									<select id="initial-state" style="width:180px;">
									</select>
									<a id="add-state-btn" title="Crear nuevo estado"><img src="/img/small_add.png" /></a>
								</div>
								
								<div id="state-input-layer">
									<input type="text" id="new-state-input" size="40" class="k-textbox" style="width:75%" />
									<a id="new-state-accept-btn" class="new-state-btn"></a>
									<a id="new-state-cancel-btn" class="new-state-btn"></a>
								</div>
                       		</li>
                        	
                        	<li class="prop-title">Z-Index:</li>
                        	<li><input id="zindex" style="width:75px" /></li>
                        	
                        	<li class="prop-title">Opacidad:</li>
                        	<li>
                        		<input id="sliderOpacity" style="width:130px;" /> 
                        		<input id="numericOpacity" value="0" style="width:75px; margin-left: 5px;" />
                        	</li>
                        	
                        	<li class="prop-title">Posición:</li>
                        	<li>
                        		<input id="sliderPositionX" class="positionX" style="width:130px;" /> 
                        		<input id="numericPositionX" value="0" style="width:75px; margin-left: 5px;" />
                        	</li>			                        	
                        	<li>
                        		<input id="sliderPositionY" class="positionY" style="width:130px;" /> 
                        		<input id="numericPositionY" value="0" style="width:75px; margin-left: 5px;" />
                        	</li>
                        	
                        	<li class="prop-title">Ángulo:</li>
                        	<li>
                        		<input id="sliderAngle" class="angle" style="width:130px;" />  
                        		<input id="numericAngle" value="0" style="width:75px; margin-left: 5px;" />
                        	</li>
                        	
                        	<li class="prop-title">Escala:</li>
                        	<li>
                        		<input id="sliderScaleX" class="scaleX" style="width:130px;" /> 
                        		<input id="numericScaleX" style="width:75px; margin-left: 5px;" />
                        	</li>
                        	
                        	<li>
                        		<input id="sliderScaleY" class="scaleY" style="width:130px;" /> 
                        		<input id="numericScaleY" style="width:75px; margin-left: 5px;" />
                        	</li>
                        	
                        	<div class="check-wrapper">
                        		<div>
                        			<input id="checkboxTouchable" type="checkbox" checked />
                        			<span>Seleccionar</span>
                        		</div>
                        		<div>
                        			<input id="checkboxDraggable" type="checkbox" checked />
                        			<span>Desplazar</span>
                        		</div>
                        	</div>
                       		
                       		<div class="check-wrapper">
                       			<div>
                       				<input id="nextButtonScene" type="checkbox" checked />
                       				<span>Mostrar botón de escena anterior</span>
                       			</div>
                       			<div>
                       				<input id="previousButtonScene" type="checkbox" checked />
                       				<span>Mostrar botón de escena siguiente</span>
                       			</div>
                       		</div>
                        				                        	
                        </ul>  
		   			
					</div>
					<!-- end rightPanel -->
					
			</div>
			<!-- end splitterWrapper -->
		
		</div>	
		<!-- end mainWrapper -->
		
	</div>
	<!-- end main -->
	
	
	
	<div id="import-window">
		<p>Selecciona un archivo:</p>
			<input id="import-book-button" name="import-book-button" type="file" />	
        	<div id="error-msg" class="window-msg"></div>
	</div>
	
	
	
	
	<div id="export-window">
		<span>Título del libro:</span>
		<input type="text" id="export-file-name" size="30" value="load" disabled />
		<div id="export-msg" class="window-msg"></div>
	</div>
	
	
	
	
	<div id="upload-window">
		<p id="upload-title">Selecciona una imagen:</p>
		<div style="width:45%">
			<input name="files" id="files" type="file" />
        </div>
        <div id="upload-msg" class="window-msg"></div>
	</div>
	
	
	
	
	<div id="text-window">
		<table>
			<tr>
				<td>Texto:</td>
				<td class="noColor"><input type="text" id="text" name="text" class="k-textbox" style="width:250px" /></td>
			</tr>
			<tr>
				<td>Fuente:</td>
				<td class="noColor">
					<select id="font" style="width:250px">
					
						<option value="AcademyEngravedLetPlain">AcademyEngravedLetPlain</option>
						<option value="AmericanTypewriter">AmericanTypewriter</option>
						<option value="AmericanTypewriter-Bold">AmericanTypewriter-Bold</option>
						<option value="AmericanTypewriter-Condensed">AmericanTypewriter-Condensed</option>
						<option value="AmericanTypewriter-CondensedBold">AmericanTypewriter-CondensedBold</option>
						<option value="AmericanTypewriter-CondensedLight">AmericanTypewriter-CondensedLight</option>
						<option value="AmericanTypewriter-Light">AmericanTypewriter-Light</option>
						<option value="AppleColorEmoji">AppleColorEmoji</option>
						<option value="AppleSDGothicNeo-Bold">AppleSDGothicNeo-Bold</option>
						<option value="AppleSDGothicNeo-Medium">AppleSDGothicNeo-Medium</option>
						<option value="ArialMT">ArialMT</option>
						<option value="Arial-BoldItalicMT">Arial-BoldItalicMT</option>
						<option value="Arial-BoldMT">Arial-BoldMT</option>
						<option value="Arial-ItalicMT">Arial-ItalicMT</option>
						<option value="ArialHebrew">ArialHebrew</option>
						<option value="ArialHebrew-Bold">ArialHebrew-Bold</option>
						<option value="ArialRoundedMTBold">ArialRoundedMTBold</option>
						<option value="Avenir-Black">Avenir-Black</option>
						<option value="Avenir-BlackOblique">Avenir-BlackOblique</option>
						<option value="Avenir-Book">Avenir-Book</option>
						<option value="Avenir-BookOblique">Avenir-BookOblique</option>
						<option value="Avenir-Heavy">Avenir-Heavy</option>
						<option value="Avenir-HeavyOblique">Avenir-HeavyOblique</option>
						<option value="Avenir-Light">Avenir-Light</option>
						<option value="Avenir-LightOblique">Avenir-LightOblique</option>
						<option value="mAvenir-Medium">mAvenir-Medium</option>
						<option value="Avenir-MediumOblique">Avenir-MediumOblique</option>
						<option value="Avenir-Oblique">Avenir-Oblique</option>
						<option value="Avenir-Roman">Avenir-Roman</option>
						<option value="AvenirNext-Bold">AvenirNext-Bold</option>
						<option value="AvenirNext-BoldItalic">AvenirNext-BoldItalic</option>
						<option value="AvenirNext-DemiBold">AvenirNext-DemiBold</option>
						<option value="AvenirNext-DemiBoldItalic">AvenirNext-DemiBoldItalic</option>
						<option value="AvenirNext-Heavy">AvenirNext-Heavy</option>
						<option value="AvenirNext-HeavyItalic">AvenirNext-HeavyItalic</option>
						<option value="AvenirNext-Italic">AvenirNext-Italic</option>
						<option value="AvenirNext-Medium">AvenirNext-Medium</option>
						<option value="AvenirNext-MediumItalic">AvenirNext-MediumItalic</option>
						<option value="AvenirNext-Regular">AvenirNext-Regular</option>
						<option value="AvenirNext-UltraLight">AvenirNext-UltraLight</option>
						<option value="AvenirNext-UltraLightItalic">AvenirNext-UltraLightItalic</option>
						<option value="AvenirNextCondensed-Bold">AvenirNextCondensed-Bold</option>
						<option value="AvenirNextCondensed-BoldItalic">AvenirNextCondensed-BoldItalic</option>
						<option value="AvenirNextCondensed-DemiBold">AvenirNextCondensed-DemiBold</option>
						<option value="AvenirNextCondensed-DemiBoldItalic">AvenirNextCondensed-DemiBoldItalic</option>
						<option value="AvenirNextCondensed-Heavy">AvenirNextCondensed-Heavy</option>
						<option value="AvenirNextCondensed-HeavyItalic">AvenirNextCondensed-HeavyItalic</option>
						<option value="AvenirNextCondensed-Italic">AvenirNextCondensed-Italic</option>
						<option value="AvenirNextCondensed-Medium">AvenirNextCondensed-Medium</option>
						<option value="AvenirNextCondensed-MediumItalic">AvenirNextCondensed-MediumItalic</option>
						<option value="AvenirNextCondensed-Regular">AvenirNextCondensed-Regular</option>
						<option value="AvenirNextCondensed-UltraLight">AvenirNextCondensed-UltraLight</option>
						<option value="AvenirNextCondensed-UltraLightItalic">AvenirNextCondensed-UltraLightItalic</option>
						<option value="BanglaSangamMN">BanglaSangamMN</option>
						<option value="BanglaSangamMN-Bold">BanglaSangamMN-Bold</option>
						<option value="Baskerville">Baskerville</option>
						<option value="Baskerville-Bold">Baskerville-Bold</option>
						<option value="Baskerville-BoldItalic">Baskerville-BoldItalic</option>
						<option value="Baskerville-Italic">Baskerville-Italic</option>
						<option value="Baskerville-SemiBold">Baskerville-SemiBold</option>
						<option value="Baskerville-SemiBoldItalic">Baskerville-SemiBoldItalic</option>
						<option value="BodoniOrnamentsITCTT">BodoniOrnamentsITCTT</option>
						<option value="BodoniSvtyTwoITCTT-Bold">BodoniSvtyTwoITCTT-Bold</option>
						<option value="BodoniSvtyTwoITCTT-Book">BodoniSvtyTwoITCTT-Book</option>
						<option value="BodoniSvtyTwoITCTT-BookIta">BodoniSvtyTwoITCTT-BookIta</option>
						<option value="BodoniSvtyTwoOSITCTT-Bold">BodoniSvtyTwoOSITCTT-Bold</option>
						<option value="BodoniSvtyTwoOSITCTT-Book">BodoniSvtyTwoOSITCTT-Book</option>
						<option value="odoniSvtyTwoOSITCTT-BookIt">odoniSvtyTwoOSITCTT-BookIt</option>
						<option value="BodoniSvtyTwoSCITCTT-Book">BodoniSvtyTwoSCITCTT-Book</option>
						<option value="BradleyHandITCTT-Bold">BradleyHandITCTT-Bold</option>
						<option value="ChalkboardSE-Bold">ChalkboardSE-Bold</option>
						<option value="ChalkboardSE-Light">ChalkboardSE-Light</option>
						<option value="ChalkboardSE-Regular">ChalkboardSE-Regular</option>
						<option value="Chalkduster">Chalkduster</option>
						<option value="Cochin">Cochin</option>
						<option value="Cochin-Bold">Cochin-Bold</option>
						<option value="Cochin-BoldItalic">Cochin-BoldItalic</option>
						<option value="Cochin-Italic">Cochin-Italic</option>
						<option value="Copperplate">Copperplate</option>
						<option value="Copperplate-Bold">Copperplate-Bold</option>
						<option value="Copperplate-Light">Copperplate-Light</option>
						<option value="Courier">Courier</option>
						<option value="Courier-Bold">Courier-Bold</option>
						<option value="Courier-BoldOblique">Courier-BoldOblique</option>
						<option value="Courier-Oblique">Courier-Oblique</option>
						<option value="CourierNewPS-BoldItalicMT">CourierNewPS-BoldItalicMT</option>
						<option value="CourierNewPS-BoldMT">CourierNewPS-BoldMT</option>
						<option value="CourierNewPS-ItalicMT">CourierNewPS-ItalicMT</option>
						<option value="CourierNewPSMT">CourierNewPSMT</option>
						<option value="DBLCDTempBlack">DBLCDTempBlack</option>
						<option value="DevanagariSangamMN">DevanagariSangamMN</option>
						<option value="DevanagariSangamMN-Bold">DevanagariSangamMN-Bold</option>
						<option value="Didot">Didot</option>
						<option value="Didot-Bold">Didot-Bold</option>
						<option value="Didot-Italic">Didot-Italic</option>
						<option value="EuphemiaUCAS">EuphemiaUCAS</option>
						<option value="EuphemiaUCAS-Bold">EuphemiaUCAS-Bold</option>
						<option value="EuphemiaUCAS-Italic">EuphemiaUCAS-Italic</option>
						<option value="Futura-CondensedExtraBold">Futura-CondensedExtraBold</option>
						<option value="Futura-CondensedMedium">Futura-CondensedMedium</option>
						<option value="Futura-Medium">Futura-Medium</option>
						<option value="Futura-MediumItalic">Futura-MediumItalic</option>
						<option value="GeezaPro">GeezaPro</option>
						<option value="GeezaPro-Bold">GeezaPro-Bold</option>
						<option value="Georgia">Georgia</option>
						<option value="Georgia-Bold">Georgia-Bold</option>
						<option value="Georgia-BoldItalic">Georgia-BoldItalic</option>
						<option value="Georgia-Italic">Georgia-Italic</option>
						<option value="GillSans">GillSans</option>
						<option value="GillSans-Bold">GillSans-Bold</option>
						<option value="GillSans-BoldItalic">GillSans-BoldItalic</option>
						<option value="GillSans-Italic">GillSans-Italic</option>
						<option value="GillSans-Light">GillSans-Light</option>
						<option value="GillSans-LightItalic">GillSans-LightItalic</option>
						<option value="GujaratiSangamMN">GujaratiSangamMN</option>
						<option value="GujaratiSangamMN-Bold">GujaratiSangamMN-Bold</option>
						<option value="GurmukhiMN">GurmukhiMN</option>
						<option value="GurmukhiMN-Bold">GurmukhiMN-Bold</option>
						<option value="STHeitiSC-Light">STHeitiSC-Light</option>
						<option value="STHeitiSC-Medium">STHeitiSC-Medium</option>
						<option value="STHeitiTC-Light">STHeitiTC-Light</option>
						<option value="STHeitiTC-Medium">STHeitiTC-Medium</option>
						<option value="Helvetica">Helvetica</option>
						<option value="Helvetica-Bold">Helvetica-Bold</option>
						<option value="Helvetica-BoldOblique">Helvetica-BoldOblique</option>
						<option value="Helvetica-Light">Helvetica-Light</option>
						<option value="Helvetica-LightOblique">Helvetica-LightOblique</option>
						<option value="Helvetica-Oblique">Helvetica-Oblique</option>
						<option value="HelveticaNeue">HelveticaNeue</option>
						<option value="HelveticaNeue-Bold">HelveticaNeue-Bold</option>
						<option value="HelveticaNeue-BoldItalic">HelveticaNeue-BoldItalic</option>
						<option value="HelveticaNeue-CondensedBlack">HelveticaNeue-CondensedBlack</option>
						<option value="HelveticaNeue-CondensedBold">HelveticaNeue-CondensedBold</option>
						<option value="HelveticaNeue-Italic">HelveticaNeue-Italic</option>
						<option value="HelveticaNeue-Light">HelveticaNeue-Light</option>
						<option value="HelveticaNeue-LightItalic">HelveticaNeue-LightItalic</option>
						<option value="HelveticaNeue-Medium">HelveticaNeue-Medium</option>
						<option value="HelveticaNeue-UltraLight">HelveticaNeue-UltraLight</option>
						<option value="HelveticaNeue-UltraLightItalic">HelveticaNeue-UltraLightItalic</option>
						<option value="HiraKakuProN-W3">HiraKakuProN-W3</option>
						<option value="HiraKakuProN-W6">HiraKakuProN-W6</option>
						<option value="HiraMinProN-W3">HiraMinProN-W3</option>
						<option value="HiraMinProN-W6">HiraMinProN-W6</option>
						<option value="HoeflerText-Black">HoeflerText-Black</option>
						<option value="HoeflerText-BlackItalic">HoeflerText-BlackItalic</option>
						<option value="HoeflerText-Italic">HoeflerText-Italic</option>
						<option value="HoeflerText-Regular">HoeflerText-Regular</option>
						<option value="Kailasa">Kailasa</option>
						<option value="Kailasa-Bold">Kailasa-Bold</option>
						<option value="KannadaSangamMN">KannadaSangamMN</option>
						<option value="KannadaSangamMN-Bold">KannadaSangamMN-Bold</option>
						<option value="MalayalamSangamMN">MalayalamSangamMN</option>
						<option value="MalayalamSangamMN-Bold">MalayalamSangamMN-Bold</option>
						<option value="Marion-Bold">Marion-Bold</option>
						<option value="Marion-Italic">Marion-Italic</option>
						<option value="Marion-Regular">Marion-Regular</option>
						<option value="MarkerFelt-Thin">MarkerFelt-Thin</option>
						<option value="MarkerFelt-Wide">MarkerFelt-Wide</option>
						<option value="Noteworthy-Bold">Noteworthy-Bold</option>
						<option value="Noteworthy-Light">Noteworthy-Light</option>
						<option value="Optima-Bold">Optima-Bold</option>
						<option value="Optima-BoldItalic">Optima-BoldItalic</option>
						<option value="Optima-ExtraBlack">Optima-ExtraBlack</option>
						<option value="Optima-Italic">Optima-Italic</option>
						<option value="Optima-Regular">Optima-Regular</option>
						<option value="OriyaSangamMN">OriyaSangamMN</option>
						<option value="riyaSangamMN-Bold">riyaSangamMN-Bold</option>
						<option value="Palatino-Bold">Palatino-Bold</option>
						<option value="Palatino-BoldItalic">Palatino-BoldItalic</option>
						<option value="Palatino-Italic">Palatino-Italic</option>
						<option value="Palatino-Roman">Palatino-Roman</option>
						<option value="Papyrus">Papyrus</option>
						<option value="Papyrus-Condensed">Papyrus-Condensed</option>
						<option value="PartyLetPlain">PartyLetPlain</option>
						<option value="SinhalaSangamMN">SinhalaSangamMN</option>
						<option value="SinhalaSangamMN-Bold">SinhalaSangamMN-Bold</option>
						<option value="SnellRoundhand">SnellRoundhand</option>
						<option value="SnellRoundhand-Black">SnellRoundhand-Black</option>
						<option value="SnellRoundhand-Bold">SnellRoundhand-Bold</option>
						<option value="Symbol">Symbol</option>
						<option value="TamilSangamMN">TamilSangamMN</option>
						<option value="TamilSangamMN-Bold">TamilSangamMN-Bold</option>
						<option value="TeluguSangamMN">TeluguSangamMN</option>
						<option value="TeluguSangamMN-Bold">TeluguSangamMN-Bold</option>
						<option value="Thonburi">Thonburi</option>
						<option value="Thonburi-Bold">Thonburi-Bold</option>
						<option value="TimesNewRomanPS-BoldItalicMT">TimesNewRomanPS-BoldItalicMT</option>
						<option value="TimesNewRomanPS-BoldMT">TimesNewRomanPS-BoldMT</option>
						<option value="TimesNewRomanPS-ItalicMT">TimesNewRomanPS-ItalicMT</option>
						<option value="TimesNewRomanPSMT">TimesNewRomanPSMT</option>
						<option value="Trebuchet-BoldItalic">Trebuchet-BoldItalic</option>
						<option value="TrebuchetMS">TrebuchetMS</option>
						<option value="TrebuchetMS-Bold">TrebuchetMS-Bold</option>
						<option value="TrebuchetMS-Italic">TrebuchetMS-Italic</option>
						<option value="Verdana">Verdana</option>
						<option value="Verdana-Bold">Verdana-Bold</option>
						<option value="Verdana-BoldItalic">Verdana-BoldItalic</option>
						<option value="Verdana-Italic">Verdana-Italic</option>
						<option value="ZapfDingbatsITC">ZapfDingbatsITC</option>
						<option value="Zapfino">Zapfino</option>
						
					</select>
				</td>
			</tr>
			<tr>
				<td>Alineación:</td>
				<td class="noColor">
					<select id="align" style="width:100px">
						<option value="left">left</option>
						<option value="right">right</option>
						<option value="center">center</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Tamaño:</td>
				<td class="noColor"><input type="number" id="size" value="50" min="0" step="1" name="size" style="width:100px" /></td>
			</tr>
			<tr>
				<td>Color:</td>
				<td># <input type="text" maxlength="6" id="color" name="color" class="k-textbox" style="width:100px" /></td>
			</tr>
		</table>
		
		<div id="text-window-buttons">
			
			<button id="cancel-text-btn" class="button" >Cancelar</button>
			<button id="accept-text-btn" class="button">Aceptar</button>
			<div id="text-msg" class="window-msg"></div>
		</div>
	</div>




	<div id="timeline-window">
		<div id="timeline">
			<a id="addSequence">
				<img src="/img/add.png" />
				<span>Nueva secuencia</span>
			</a>
			<a id="timeline-preview">
				<img src="/img/play_timeline.png" width="32" height="32" />
				<span>Ir a previsualización</span>	
			</a>

			<div id="wrapperBox"></div>
			<a id="okTimeline"><img src="/img/accept.png" /><span>Guardar cambios</span></a>
		</div>
	</div>




	<div id="new-action-window">
		<table>
			<tr id="tr-event-type">
				<td>Evento:</td>
				<td>
					<select id="action-event" style="width:200px">
						<option value="touch">touch</option>
						<option value="onEnter">onEnter</option>
						<option value="shakeStart">shakeStart</option>
						<option value="shakeStop">shakeStop</option>
						<option value="dragBegin">dragBegin</option>
						<option value="dragging">dragging</option>
						<option value="drop">drop</option>
					</select>
				</td>
			</tr>
			<tr id="tr-state">
				<td>Estado:</td>
				<td>
					<select id="action-state" style="width:200px">
					</select>
				</td>
			</tr>
			<tr><td>Nombre:</td>
				<td><input type="text" id="action-name" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr id="tr-sound">
				<td>Sonido:</td>
				<td>
					<!-- <input id="action-sound" type="text" size="40" class="k-textbox" style="width:200px" /> -->
					<input type="file" id="action-sound" name="action-sound" />
       				<span id="action-sound-title"></span>
				</td>
			</tr>
			<tr id="tr-duration">
				<td>Duración:</td>
				<td><input id="action-duration" type="number" /></td>
			</tr>
			<tr id="tr-repeat">
				<td>Repetir:</td>
				<td>
					<input id="action-repeat" type="number" />
					<span id="repeat-comment">Indica -1 para repetición periódica.</span>
				</td>
			</tr>
			<tr><td>Tipo:</td>
				<td>
					<select id="action-type" style="width:200px">
						<option value="DDMoveTo">DDMoveTo</option>
						<option value="DDMoveBy">DDMoveBy</option>
						<option value="DDRotateTo">DDRotateTo</option>
						<option value="DDRotateBy">DDRotateBy</option>
						<option value="DDScaleTo">DDScaleTo</option>
						<option value="DDScaleBy">DDScaleBy</option>
						<option value="DDFadeIn">DDFadeIn</option>
						<option value="DDFadeOut">DDFadeOut</option>
						<option value="DDSpawn">DDSpawn</option>
						<option value="DDVibrate">DDVibrate</option>
						<option value="DDFrameAction">DDFrameAction</option>
						<option value="DDTextureChange">DDTextureChange</option>
						<option value="DDPlayActionToBo">DDPlayActionToBo</option>
						<option value="DDEnableBo">DDEnableBo</option>
						<option value="DDLaunchScene">DDLaunchScene</option>
						<option value="DDLaunchNextScene">DDLaunchNextScene</option>
						<option value="DDLaunchPrevScene">DDLaunchPrevScene</option>
						<option value="DDEnableBGMusic">DDEnableBGMusic</option>
						<option value="DDChangeBGMusic">DDChangeBGMusic</option>
						<option value="DDStopAction">DDStopAction</option>
						<option value="DDDropEnd">DDDropEnd</option>
						<option value="DDHighlight">DDHighlight</option>
						<option value="DDIndexChange">DDIndexChange</option>
						<option value="DDStateChange">DDStateChange</option>
						<option value="DDPlayCustomAction">DDPlayCustomAction</option>
						<option value="DDDelay">DDDelay</option>
					</select>
				</td>
			</tr>
			<tr class="action-param" id="tr-move-x">
				<td>Eje X:</td>
				<td><input id="move-x" type="number" /></td>
			</tr>
			<tr class="action-param" id="tr-move-y">
				<td>Eje Y:</td>
				<td><input id="move-y" type="number" /></td>
			</tr>
			<tr class="action-param" id="tr-rotate">
				<td>Ángulo:</td>
				<td><input id="angle" type="number" /></td>
			</tr>
			<tr class="action-param" id="tr-scale-x">
				<td>Eje X:</td>
				<td><input id="scale-x" type="number" /></td>	
			</tr>
			<tr class="action-param" id="tr-scale-y">
				<td>Eje Y:</td>
				<td><input id="scale-y" type="number" /></td>
			</tr>
			<tr class="action-param" id="tr-texture">
				<td>Nueva imagen:</td>
				<td><input type="text" id="texture" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-tobo-object">
				<td>Objeto:</td>
				<td><select id="tobo-object" style="width:200px"></select></td>
			</tr>
			<tr class="action-param" id="tr-tobo-action">
				<td>Acción:</td>
				<td><input type="text" id="tobo-action" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-enable-tobo-object">
				<td>Objeto:</td>
				<td><select id="enable-tobo-object" style="width:200px"></select></td>
			</tr>
			<tr class="action-param" id="tr-enable-tobo-boolean">
				<td>Activar objeto:</td>
				<td>
					<input type="radio" name="enable-tobo-action" value="YES" checked />YES
					<input type="radio" name="enable-tobo-action" value="NO" />NO
				</td>
			</tr>
			<tr class="action-param" id="tr-launch-scene">
				<td>Escena:</td>
				<td><input type="text" id="launch-scene" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-enable-music">
				<td>Activar sonido:</td>
				<td>
					<input type="radio" name="enable-music" value="YES" checked />YES
					<input type="radio" name="enable-music" value="NO" />NO
				</td>
			</tr>
			<tr class="action-param" id="tr-change-music">
				<td>Nuevo sonido:</td>
				<td>
					<!-- <input type="text" id="change-music" size="40" class="k-textbox" style="width:200px" />  -->
					<input type="file" id="change-music" name="change-music" />
       				<span id="change-music-title"></span>
				</td>
			</tr>
			<tr class="action-param" id="tr-stop-object">
				<td>Objeto:</td>
				<td><select id="stop-object" style="width:200px"></select></td>
			</tr>
			<tr class="action-param" id="tr-stop-action">
				<td>Acción:</td>
				<td><input type="text" id="stop-action" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-drop-object">
				<td>Objeto:</td>
				<td><select id="drop-object" style="width:200px"></select></td>
			</tr>
			<tr class="action-param" id="tr-drop-action">
				<td>Acción:</td>
				<td><input type="text" id="drop-action" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-highlight-object">
				<td>Objeto:</td>
				<td><select id="highlight-object" style="width:200px"></select></td>
			</tr>
			<tr class="action-param" id="tr-highlight-action">
				<td>Acción:</td>
				<td><input type="text" id="highlight-action" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-index-change">
				<td>Índice:</td>
				<td><input id="index-change" style="width:100px" /></td>
			</tr>
			<tr class="action-param" id="tr-state-change">
				<td>Nuevo estado:</td>
				<td><input type="text" id="state-change" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-play-action">
				<td>Acción personalizada:</td>
				<td><input type="text" id="play-action" size="40" class="k-textbox" style="width:200px" /></td>
			</tr>
			<tr class="action-param" id="tr-frame-action">
				<td>Frame:</td>
				<td>
					<div id="tr-frame-wrapper">
						<div class="tr-frame-elem">
							<input class="frame-action k-textbox" type="text" size="40" style="width:200px"/>
							<a id="add-frame-button" class="add-button" title="Añade un frame a la acción"><img src="/img/small_add.png"></a>
						</div>
					</div>
					
				</td>
			</tr>
			<tr class="action-param" id="tr-delay">
			</tr>
			<tr class="action-param" id="tr-spawn-action">
				<td>Acciones en paralelo:</td>
				<td>
					<div id="tr-spawn-wrapper">
						<div class="tr-spawn-elem">
							<a id="add-spawn-button" class="add-button" title="Añade una acción">
								<img src="/img/small_add.png" />
								<span>Añadir acción</span>
							</a>
						</div>
					</div>
				</td>
			</tr>
		
		</table>
		
		<div id="action-window-buttons">
			
			<button id="cancel-action-btn" class="button" >Cancelar</button>
			<button id="accept-action-btn" class="button">Aceptar</button>
			<div id="action-msg" class="window-msg"></div>
		</div>
		
	</div>
	
	
	
	
	<div id="deviceWindow">

		<h1>Selecciona el dispositivo de visualización:</h1>
		<div>
			<a device="iPhone" class="iPhone">
				<img id="iphone-img" src="/img/iphone5.png" />
				<span id="iphone-title">iPhone</span>
			</a>
			
			<a device="iPad" class="iPad">
				<img src="/img/ipad.png" id="ipad-img" />
				<span id="ipad-title">iPad</span>
			</a>

		</div>
		
		
	</div>
	
	
	
	
	<div id="settings-window">
       	<ul>
       		<li>
       			<label for="version-engine">Versión del sistema:</label> 
       			<span id="version-engine">0.2.2</span>
       		</li>
       		
       		<li>
       			<label for="iOSDevice">Dispositivo iOS:</label>
       			<span id="iOSDevice"></span>
       		</li>
       		
       		<li>
       			<p><label for="opening-scene">Escena inicial:</label></p>
       			<p class="bottom"><select id="opening-scene" style="width:150px;"></select></p>
       		</li>
       		
       		<li>
       			<label for="bg-music">Sonido de fondo:</label>
       			<p class="bottom">
       				<input type="file" id="bg-music" name="bg-music" />
       				<span id="bg-music-title"></span>
       			</p>
       		</li>
       		
       		<li>
       			<label for="prev-scene-icon">Icono de escena anterior:</label>
       			<p class="bottom"><input type="file" id="prev-scene-icon"/></p>
       		</li>
       		
       		<li>
       			<label for="next-scene-icon">Icono de escena siguiente:</label>
       			<p class="bottom"><input type="file" id="next-scene-icon"/></p>
       		</li>
       	
    	</ul>
	</div>	
	
	
	<!--  Pantalla de previsualización -->
	<div id="preview-overlay"></div>
	<div id="preview">
	
		<h1>Previsualización</h1>
	
		<div class="preview-box">
			<label for="object-list">Objecto que se anima:</label> 
			<select id="object-list" class="select">
			</select>
		</div>
		
		<div class="preview-box">
			<label for="state-list">Estado del objeto:</label> 
			<select id="state-list" class="select">
			</select>
		</div>
		
		<div class="preview-box">
			<label for="event-list">Evento que se ejecuta:</label> 
			<select id="event-list" class="select">
			</select>
		</div>
		
		<div id="button-container">	
			<a id="preview-play-btn" title="Reproducir"><img src="/img/play128.png" class="play" /></a>
			<a id="restart-preview" title="Volver al inicio"><img src="/img/back.png" /></a>
			<a id="exit-preview" title="Salir de previsualización"><img src="/img/close.png" class="close"/></a>
		</div>
	
	</div>	
	
	<div id="preview-message-wrapper">
		<div id="preview-message">
		</div>
	</div>
	
	
	<div id="canvas-overlay">
	</div>
	
	<div id="batch-node-window" style="display:none">
	
		<h1 id="batch-node-window-title"></h1>
	
		<ul id="batch-node-window-list">
			<!--  
			<li><span>Primer batch node</span><a class="remove-batch-btn"></a></li>
			-->
		</ul>
		
		<input type="file" id="batch-node-window-select" />
	</div>
	
</body>	
</html>
